<template>
	<tm-fullView>
		<tm-menubars title="导航工具栏" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		
		<tm-bottomnavigation  icon-color="red" :list="list_1"></tm-bottomnavigation>
		
		<!-- #ifdef H5 -->
		<tm-bottomnavigation
			bg-theme="bg-gradient-primary-lighten"
			position="top"
			border="bottom"
			:top="navTop"
			
			icon-color="yellow"
			icon-color-grey="white"
			:safe="false"
			:list="list_top"
		></tm-bottomnavigation>
		
		<view>
			<tm-bottomnavigation
				:safe="false"
				bg-theme="bg-gradient-orange-accent-b"
				icon-color-grey="white"
				:round="24"
				:offset-left="32"
				position="bottom"
				:bottom="100"
				border=""
				icon-color="yellow"
				:list="list_3"
			></tm-bottomnavigation>
		</view>
		<view style="height: 200rpx;"></view>
		<tm-sheet :shadow="0" :padding="[0,0]">
			
			<tm-bottomnavigation
				:safe="false"
				
			
				position="static"
				:round="4"
				:offset-left="32"
				:bottom="100"
				:top="45"
				border=""
				icon-color="green"
				:list="list_2"
			></tm-bottomnavigation>
		</tm-sheet>
		
		<!-- #endif -->
	</tm-fullView>
</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	
	import tmBottomnavigation from "@/tm-vuetify/components/tm-bottomnavigation/tm-bottomnavigation.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmBottomnavigation,},
	data() {
		return {
			aa:true,
			
			list_1: [
				{ iconSize: 46,showDot:true,dot:{dot:true},path:'/pages/index/index', icon: 'https://roundicons.com/wp-content/uploads/2017/09/Heartrate-freebie-icon-1.png', value: '标题' },
				{ iconSize: 46, icon: 'https://roundicons.com/wp-content/uploads/2017/09/Warehouse-freebie-icon.png', value: '标题' },
				{ iconSize: 46, icon: 'icon-plus', value: '标题',custom:true,customFontColor:'white',path:'/subpages/com/bottomnavigation'},
				{ iconSize: 46,showDot:true,dot:{dot:false,num:99,color:'green'}, icon: 'https://roundicons.com/wp-content/uploads/2017/09/Donut-freebie-icon.png', value: '标题' },
				{ iconSize: 46,showDot:true,dot:{dot:false,icon:'icon-position-fill'}, icon: 'https://roundicons.com/wp-content/uploads/2017/09/Street-Cone-freebie-icon.png', value: '标题' }
			],
			list_2: [
				{ iconSize: 36, icon: 'icon-position-fill', value: '标题' },
				{ iconSize: 36, icon: 'icon-smile-fill', value: '标题' },
				{
					iconSize: 36,
					icon: 'icon-times',
					value: '标题',
					custom: true,
					customColor: 'green',
					customFontColor:'white'
				},
				{ iconSize: 36, icon: 'icon-clock-fill', value: '标题' },
				{ iconSize: 36, icon: 'icon-clock-fill', value: '标题' }
			],
			list_3: [
				{ iconSize: 36, icon: 'icon-position-fill', value: '标题' },
				{ iconSize: 36, icon: 'icon-smile-fill', value: '标题' },
				{
					iconSize: 36,
					icon: 'icon-times',
					value: '标题',
					custom: true,
					customColor: 'red',
					customFontColor:'white'
				},
				{ iconSize: 36, icon: 'icon-clock-fill', value: '标题' },
				{
					iconSize: 36,
					icon: 'icon-times',
					value: '标题',
					custom: true,
					customColor: 'red',
					customFontColor:'white'
				}
			],
			list_top: [
				{ iconSize: 36, icon: 'icon-position-fill', value: '标题' },
				{ iconSize: 36, icon: 'icon-smile-fill', value: '标题' },
				{ iconSize: 36, icon: 'icon-user-fill', value: '标题' },
				{ iconSize: 36, icon: 'icon-clock-fill', value: '标题' },
				{ iconSize: 36, icon: 'icon-headset-fill', value: '标题' }
			],
			navTop: 45
		};
	},
	onLoad() {
		// #ifndef H5
		this.navTop = 100;
		// #endif

	},
	methods: {}
};
</script>

<style></style>
